<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-delete>
				<delBtn @del="crud.delete(scope.row)"></delBtn>
			</template>
			<template #slot-disable>
				<el-button type="text" class="disable">禁用</el-button>
			</template>

			<template #table-column-type="{scope}">
				导航入口
			</template>
			<template #table-column-icon="{scope}">
				正常
			</template>
			<template #table-column-url="{scope}">
				www.baidu.com
			</template>
			<template #table-column-urlType="{scope}">
				直接跳转
			</template>
			<template #table-column-status="{scope}">
				正常
			</template>
		</cl-crud>

		<cl-form ref="cl-form"></cl-form>
	</div>
</template>

<script>
import delBtn from '@/components/common/del-btn';

export default {
	data() {
		return {
			crud: null
		};
	},
	components: {
		delBtn
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.test)
				.permission({
					update: true,
					delete: true,
					add: true
				})
				.set('dict', {
					label: {
						add: '添加新导航栏'
					}
				})
				.set('table', {
					columns: [
						{
							type: 'selection',
							align: 'center',
							width: 60
						},
						{
							label: '序号',
							prop: 'index',
							align: 'center'
						},
						{
							label: '标题',
							prop: 'name',
							align: 'center'
						},
						{
							label: '类型',
							prop: 'type',
							align: 'center'
						},
						{
							label: '图标',
							prop: 'icon',
							align: 'center'
						},
						{
							label: '链接',
							prop: 'url',
							align: 'center'
						},
						{
							label: '链接类型',
							prop: 'urlType',
							align: 'center'
						},
						{
							label: '状态',
							prop: 'status',
							align: 'center'
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center',
							sortable: 'custom',
							emptyText: '0'
						}
					],

					op: {
						layout: ['slot-disable', 'edit', 'slot-delete']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '100px'
					},
					items: [
						{
							label: '标题',
							prop: 'title',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入标题'
								}
							},
							rules: {
								required: true,
								message: '请输入标题'
							}
						},
						{
							label: '类型',
							prop: 'type',
							component: {
								name: 'el-select',
								props: {
									filterable: true,
									'default-first-option': true,
									clearable: true,
									placeholder: '请选择类型'
								},
								options: [
									{
										label: '导航入口',
										value: '1'
									},
									{
										label: '宣传栏',
										value: '2'
									}
								]
							},
							rules: {
								required: true,
								message: '请选择类型'
							}
						},
						{
							label: '客服图标',
							prop: 'kficon',
							component: {
								name: 'cl-upload'
							},
							rules: {
								required: true,
								message: '客服图标'
							}
						},
						{
							label: '链接',
							prop: 'url',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入链接'
								}
							},
							rules: {
								required: true,
								message: '请输入链接'
							}
						},
						{
							label: '链接类型',
							prop: 'urlType',
							component: {
								name: 'el-select',
								props: {
									filterable: true,
									'default-first-option': true,
									clearable: true,
									placeholder: '请选择类型'
								},
								options: [
									{
										label: '直接跳转',
										value: '1'
									},
									{
										label: '加参数',
										value: '2'
									}
								]
							},
							rules: {
								required: true,
								message: '请选择类型'
							}
						},
						{
							label: '启用状态',
							prop: 'status',
							component: {
								name: 'el-switch'
							}
						}
					]
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'multi-delete-btn', 'query', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();

			app.refresh();
		}
	}
};
</script>
<style lang="scss">
.disable {
	font-size: $font12;
}
</style>
